<template>
  <div class="table-box">
    <div class="button-list">
      <button v-for="item in buttonList" :key="item.ids">
        {{ item.name }}
      </button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      class="my-table"
      :row-class-name="rowClassName"
    >
      <el-table-column label="序号" width="50">
        <template slot-scope="scope">
          <span>{{ scope.row.index }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务名称">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务类型">
        <template slot-scope="scope">
          <span>{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户名称">
        <template slot-scope="scope">
          <span>{{ scope.row.customerName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务单号">
        <template slot-scope="scope">
          <span>{{ scope.row.taskNumber }}</span>
        </template>
      </el-table-column>

      <el-table-column label="进度">
        <template slot-scope="scope">
          <span>{{ scope.row.schedule }}</span>
        </template>
      </el-table-column>
      <el-table-column label="业务环节">
        <template slot-scope="scope">
          <span>{{ scope.row.businessProcess }}</span>
        </template> </el-table-column
      ><el-table-column label="年度合同金额" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.annualAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="计划总金额" width="90">
        <template slot-scope="scope">
          <span>{{ scope.row.plannedAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开票金额">
        <template slot-scope="scope">
          <span>{{ scope.row.invoiceAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实际收款">
        <template slot-scope="scope">
          <span>{{ scope.row.actualReceipts }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人">
        <template slot-scope="scope">
          <span>{{ scope.row.creator }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建日期">
        <template slot-scope="scope">
          <span>{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="当前负责人" width="90">
        <template slot-scope="scope">
          <span>{{ scope.row.responsible }}</span>
        </template>
      </el-table-column>
      <el-table-column label="负责开始时间" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.stateDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="199">
        <template slot-scope="scope">
          <div class="operation-btn">
            <span @click="handleEdit(scope.$index, scope.row)">编辑</span>
            <span>提报</span>
            <span>工作日志</span>
            <span>查看</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="my-pagination">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="10"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, prev, pager, next, jumper"
        :total="1000"
      >
        <template slot="prev">共 {{ 5 }} 页</template>
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "taskTable",
  data() {
    return {
      buttonList: [
        // 按钮list
        { name: "创建任务", id: 1 },
        { name: "编辑任务", id: 2 },
        { name: "查看工作日志", id: 1 },
        { name: "审批/环节流转", id: 1 },
        { name: "导出模板", id: 1 },
        { name: "导入任务", id: 1 },
        { name: "标记为重点工作", id: 1 },
        { name: "分类汇总", id: 1 },
        { name: "用印管理", id: 1 },
      ],
      currentPage: 5,
      tableData: [
        // 表格数据
        {
          index: "1",
          name: "任务名称",
          type: "任务类型",
          customerName: "客户名称",
          taskNumber: "任务单号",
          schedule: "进度",
          businessProcess: "业务环节",
          annualAmount: "年度合同金额",
          plannedAmount: "计划总金额",
          invoiceAmount: "开票金额",
          actualReceipts: "实际收款",
          creator: "创建人",
          date: "创建日期",
          responsible: "当前负责人",
          stateDate: "负责开始日期",
        },
        {
          index: "1",
          name: "任务名称",
          type: "任务类型",
          customerName: "客户名称",
          taskNumber: "任务单号",
          schedule: "进度",
          businessProcess: "业务环节",
          annualAmount: "年度合同金额",
          plannedAmount: "计划总金额",
          invoiceAmount: "开票金额",
          actualReceipts: "实际收款",
          creator: "创建人",
          date: "创建日期",
          responsible: "当前负责人",
          stateDate: "负责开始日期",
        },
        {
          index: "2",
          name: "任务名称",
          type: "任务类型",
          customerName: "客户名称",
          taskNumber: "任务单号",
          schedule: "进度",
          businessProcess: "业务环节",
          annualAmount: "年度合同金额",
          plannedAmount: "计划总金额",
          invoiceAmount: "开票金额",
          actualReceipts: "实际收款",
          creator: "创建人",
          date: "创建日期",
          responsible: "当前负责人",
          stateDate: "负责开始日期",
        },
        {
          index: "3",
          name: "任务名称",
          type: "任务类型",
          customerName: "客户名称",
          taskNumber: "任务单号",
          schedule: "进度",
          businessProcess: "业务环节",
          annualAmount: "年度合同金额",
          plannedAmount: "计划总金额",
          invoiceAmount: "开票金额",
          actualReceipts: "实际收款",
          creator: "创建人",
          date: "创建日期",
          responsible: "当前负责人",
          stateDate: "负责开始日期",
          operation: "操作",
        },
      ],
    };
  },
  methods: {
    handleEdit() {},
    rowClassName() {
      return "custom-row-class"; // 返回自定义的类名
    },
  },
  mounted() {},
};
</script>
<style  lang="less" scoped>
@import "./taskTable.less";
</style>
